<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>智慧旅游小助手</title>
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav class="navbar glassmorphism">
            <div class="logo" data-apple-interactive>
                <span class="logo-gradient">HAIKOU</span>
            </div>
            
            <ul class="nav-links">
                <li><a class="apple-menu-item" href="/">首页</a></li>
                <li><a class="apple-menu-item" href="/attractions">景点</a></li>
                <li><a class="apple-menu-item" href="/restaurants">美食</a></li>
                <li><a class="apple-menu-item" href="/transport">交通</a></li>
            </ul>
            
            <div class="burger-menu" data-apple-interactive>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </nav>
    </header>

    <div class="container">
        {% block content %}{% endblock %}
    </div>

    <script src="{{ url_for('static', filename='js/apple-interactions.js') }}"></script>
    <script>
        window.addEventListener('scroll', () => {
            document.querySelector('.navbar').classList.toggle('scrolled', window.scrollY > 50)
        })
    </script>
</body>
</html>